<!-- BarChart.vue -->

<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="always">
					订单:
					<div ref="aaa" class="chart-container" style="width: auto;height: 400px;"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="always">
					订单:
					<div ref="chart" class="chart-container" style="width: auto;height: 400px;"></div>
				</el-card>
			</el-col>
		</el-row>
		

	</div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		data() {
			return {
				aaa:null,
				chart: null,
				chartOptions: {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar'
					}]
				}
			};
		},
		mounted() {
			this.chart = echarts.init(this.$refs.chart);
			this.chart.setOption(this.chartOptions);
			// Resize chart with window
			window.addEventListener('resize', () => {
				if (this.chart) {
					this.chart.resize();
				}
			});
			
			this.aaa = echarts.init(this.$refs.aaa);
			this.aaa.setOption(this.chartOptions);
			// Resize chart with window
			window.addEventListener('resize', () => {
				if (this.aaa) {
					this.aaa.resize();
				}
			});
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose();
			}
			if (this.aaa) {
				this.aaa.dispose();
			}
		}
	};
</script>

<style scoped>
	.chart-container {
		height: 100vh;
	}
</style>